<template>
  <div id="app">
    <div class="content">
      <!-- <div class="shop-swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div> -->
      <!-- <div class="li" >
        <div class="picture b-color">
            <van-image src="http://lm.05321888.com:88/date/gh_dd50779238a7/osQd753tednLtgRR3ydQxaGrQe6I/img/1676521758243.png">
                <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                </template>
            </van-image>
          <div class="second-row">
            <van-tag type="danger" style="font-size: 12px;">官方授权</van-tag>
            联通花卷卡39元包203G通用+200分钟通话 
          </div>
        </div>
      </div> -->
      <div
        class="li"
        v-for="shop in shopInfo"
        :key="shop.id"
        @click="pushByOrder(shop.id)"
      >
        <div class="picture b-color">
          <van-image :src="shop.imgUrl">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="second-row">
            <!-- <span class="shoFa" style="font-size: 12px;">官方授权</span> -->
            <van-tag type="danger" style="font-size: 12px">官方授权</van-tag>
            {{ shop.title }}
          </div>
        </div>
      </div>
    </div>
    <van-tabbar route placeholder safe-area-inset-bottom >
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/searchOrder" icon="search">订单查询</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { getHomeGoodList } from "@/api/index.js";

export default {
  name: "Home",

  data() {
    return {
      shopInfo: [],
    };
  },
  methods: {
    pushByOrder(id) {
      this.$router.push("/buyGood?id=" + id);
    },
  },
  created() {
    getHomeGoodList(1,20).then(
        res => {
          this.shopInfo = res.data.data.data;
          if(res.data.code != 200){
            return this.$toast('获取失败...');
          }
          
        }
      );
  },
};
</script>

<style >
body {
  background: #efefef;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui",
    "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}

@media screen and (min-width: 600px) {
  .content {
    width: 500px;
    /* background-color: #efefef; */
    /* box-shadow: 0 0 10px #ccc; */
    margin: 0 auto;
  }
}
.shop-swipe {
  margin: 0 1%;
  margin-bottom: 10px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 180px;
  text-align: center;
  background-color: #39a9ed;
  /* box-shadow: 0 0 10px #ccc; */
}
.li {
  box-shadow: 0 0 10px #ccc;
  width: 48%;
  display: inline-block;
  margin: 5px 1%;
}
.picture {
  padding: 5px;
}
.second-row {
  padding-top: 3px;
  font-size: 14px;

  line-height: 18px;
  height: 36px;
  /* 2em = 父级元素尺寸*2 ;2rem = html根元素尺寸*2 */
  overflow: hidden; /*隐藏溢出盒子的内容 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.shoFa {
  background-color: #e93140;
  color: white;
  padding: 3px 5px;
  border-radius: 5px;
  margin-right: 3px;
  position: relative;
  top: -2px;
}
</style>